Sriram

Follow

--

Azure Event Grid is used to design serverless and event-based architectures. It allows you to connect multiple azure services and functions based on event activities. In this article, we will see how you can create an image resizing web app using Azure Event Grid. We will complete this tutorial in two parts — Uploading the image and resizing through Azure Event Grid. But before anything else, let’s learn a bit about Azure Event Grid.

What is the Azure Event Grid?

Event Grid is an event routing service that connects applications and services together through event messaging. You connect other azure resources using Event Grid subscription and then give the WebHook or event handler endpoint to send events. Moreover, we can use filters to route events to specific endpoints.

Following is a sample architecture of Event Grid. Event Sources represent an application or place where an event has happened. Later, Event Grid uses Event Handlers to react to the events.

Before we start let's see the pricing of Azure Event Grid

Event Grid offers pay-per-operation pricing and you get free 100,000 operations per month. After that, you are charged $0.60 per million operations. Operations include management calls, filtering by subject, event ingress and subscription delivery attempts.

Now let’s get started with our tutorial. Here we will build a web app that accepts normal images and then displays a resized version of it as a thumbnail. Services we will use in this architecture are — Azure App service, Blob Storage, Event Grid and Azure Functions.

Now let’s get started with Set up

In the first part, we will create a web app that will store and display images from Azure Storage. We will use the Azure Blob Storage client library to upload images. Later we will use Azure Event Grid to resize the images. In our complete tutorial, we will use Azure Cloud Shell.

2. We are using the Azure Storage account to store images into a blob container. Run the following command in Shell and replace with a globally unique name for your Blob Storage account.

3. Next, we will create two Blob Storage Containers to store images. A container is like a folder where we store our files. The first container will be named as images for which the public access will be off. The second container will be named thumbnails for public access and will be set to ‘container’, allowing page visitors to view the images.

You will use Get-AzStorageAccountKey to get the storage account key and then To create two new containers you will use the New-AzStorageContainer command.

4. Now we will create an App Service Plan to specify the location, plan and features of the web app that we will create for image resizing. You can use the following command to do that.

5. We will build a web app from the GitHub sample repository and to create a web app run the following command in PowerShell. Make sure you replace with a unique web app name and a name that is not unique will give you an error message.

6. Azure App Service supports multiple ways to deploy web apps, and here, we will use this sample repository. It accepts an image, saves it in a blob container and displays it through the thumbnail container.

7. Our web app uses Azure Storage APIs for .NET to upload images. Configure the remaining parameters with the following commands.

8. To test the web app, go to the URL, which will look like https://.azurewebsites.net. You can upload an image here to test the functionalities of the app. You can sign in to your Azure Portal and find the uploaded images in the Storage account > Containers > images container.

If everything works well, you won’t see anything on the app page. I mean there will be no image shown to you as a thumbnail because we have not done that part yet. We will do that later, but to check if the thumbnail container is working fine, you can try uploading an image in that container directly from Azure Portal. And you will see this on the web app page.